<template>
  <div class="it-select">
    <div class="select-box">
      绑定设备
      <span class="it-select-input">
        <div class="input-text" placeholder="请选择或搜索">
          <input
            type="text"
            v-model="fillName"
            @focus="onFocus"
            @blur="onBlur($event)"
            @input="onInput"
          />
        </div>
      </span>
      <span
        :class="['triangle-down', { rotate: rotate }]"
        @click="openSelect"
      ></span>

      <div
        :class="['it-select-options-panel', showOptions ? 'show' : 'hidden']"
      >
        <el-scrollbar
          :height="optionsList && optionsList.length > 3 ? '140px' : ''"
        >
          <p
            class="it-select-option"
            @mousedown="getValue(item, item.pkid)"
            v-for="(item, index) in optionsList"
            :class="item.select == false ? 'selected' : ''"
            :key="index"
          >
            {{ item[props.label] }}
          </p>
        </el-scrollbar>
      </div>
    </div>
    <!-- <div class="select-box  direction" v-if="eqModel && eqModel == '枪机'">
            绑定朝向
            <span class="it-select-input">
                <div class="input-text" placeholder="请选择设备">
                    <input type="text" v-model="directionName" @focus="onFocus1" @blur="onBlur1($event)">
                </div>
            </span>
            <span :class="['triangle-down', { rotate: rotate2 }]" @click="openSelect2"></span>

            <div :class="[
                'it-select-options-panel',
                showOptions2 ? 'show' : 'hidden',
            ]">
                <el-scrollbar height="140px">
                    <p class="it-select-option" @mousedown="getValue2(item, item.pkid)"
                        v-for="(item, index) in directionData" :key="index">
                        {{ item.name }}
                    </p>
                </el-scrollbar>
            </div>


        </div> -->
    <div class="btn-group">
      <div class="cancel">
        <el-button
          type=""
          @click="cancel"
          color="rgba(10, 47, 64, 1)"
          style="color:rgba(38, 190, 255, 1) ;border: 1px solid #26BEFF;"
          >取消</el-button
        >
      </div>
      <div class="confirm">
        <el-button
          type="primary"
          @click="confirm"
          color="rgba(38, 190, 255, 1)"
          style="color: #ffffff;"
          >确认</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import {
  ref,
  watch,
  computed,
  defineProps,
  toRefs,
  defineEmits,
  onMounted,
} from "vue";
const emit = defineEmits(["onSelect", "cancel"]);
const props = defineProps({
  formData: {
    type: Array,
    default: () => [],
  },
  label: {
    type: String,
    default: () => "",
  },
  eqModel: {
    type: String,
    default: () => "",
  },
});
const { formData, eqModel } = toRefs(props);
let optionsList = ref();
const fillName = ref("请选择或搜索");
const directionName = ref("请选择朝向");
const selectObj = ref({});
const selectObj1 = ref({});
let rotate = ref(false);
let showOptions = ref(false);
let showOptions2 = ref(false);
let rotate2 = ref(false);
const onFocus = () => {
  if (JSON.stringify(selectObj.value) == "{}") {
    fillName.value = "";
  } else {
    return;
  }
  showOptions.value = true;
  rotate.value = true;
};

const onFocus1 = () => {
  if (JSON.stringify(selectObj1.value) == "{}") {
    directionName.value = "";
  } else {
    return;
  }
  showOptions2.value = true;
  rotate2.value = true;
};

const getValue = (item, pkid) => {
  if (item.select != false) {
    fillName.value = item[props.label];
    selectObj.value = item;
    showOptions.value = false;
    rotate.value = false;
  } else {
    ElMessage.warning("该设备已有对应的点位，请重新选择!");
  }
};

const getValue2 = (item, pkid) => {
  directionName.value = item.name;
  selectObj1.value = item;
  showOptions2.value = false;
  rotate2.value = false;
};

const onBlur = () => {
  console.log("失去焦点");

  if (JSON.stringify(selectObj.value) == "{}") {
    if (fillName.value == "") {
      fillName.value = "请选择设备";
    }
  } else {
    fillName.value = selectObj.value[props.label];
    return;
  }
  showOptions.value = false;
  rotate.value = false;
};

const onBlur1 = () => {
  console.log("失去焦点");

  if (JSON.stringify(selectObj1.value) == "{}") {
    if (directionName.value == "") {
      directionName.value = "请选择设备";
    }
  } else {
    directionName.value = selectObj1.value.name;
    return;
  }
  showOptions2.value = false;
  rotate2.value = false;
};

const onInput = () => {
  console.log("正在输入");
  if (fillName.value) {
    setTimeout(() => {
      optionsList.value = formData.value.filter((item) => {
        return item[props.label]
          .toLowerCase()
          .includes(fillName.value.toLowerCase());
      });
    }, 100);
  } else {
    optionsList.value = formData.value;
  }
};
const openSelect = () => {
  showOptions.value = !showOptions.value;
  rotate.value = !rotate.value;
};

const openSelect2 = () => {
  showOptions2.value = !showOptions2.value;
  rotate2.value = !rotate2.value;
};

const confirm = () => {
  let arr = Object.keys(selectObj.value);
  if (arr.length > 0) {
    // if (eqModel.value && eqModel.value == "枪机") {
    //   if (selectObj1.value.direction) {
    //     selectObj.value.direction = selectObj1.value.direction;
    //   } else {
    //     selectObj.value.direction = "left";
    //   }
    // }
    console.log(selectObj.value);
    selectObj.value.select = false;
    emit("onSelect", selectObj.value);
    console.log("选择成功++++++++");
  } else {
    ElMessage.warning("请选择设备！");
    return;
  }
};
const cancel = () => {
  if (selectObj.value) {
    selectObj.value = {};
  }
  emit("cancel");
};

const directionData = [
  { name: "上", direction: "up" },
  { name: "下", direction: "down" },
  { name: "左", direction: "left" },
  { name: "右", direction: "right" },
];

onMounted(() => {
  optionsList.value = formData.value;
});
</script>

<style scoped lang="scss">
.it-select {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.select-box {
  height: clamp(2rem, 1.67vw, 4rem);
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.btn-group {
  display: flex;
  width: 100%;
  justify-content: right;
  margin-top: 30px;

  & > div {
    margin-right: 10px;
  }
}

.it-select-input {
  background-color: rgba(37, 55, 68, 1);
  width: clamp(13.75rem, 11.46vw, 27.5rem);
  justify-content: center;
  line-height: 100%;
  text-align: center;
  cursor: pointer;
  border: none;
  padding: 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 4px;
}

.input-text {
  width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  text-align: center;

  input {
    width: 100%;
    background-color: rgba(37, 55, 68, 1);
    border: none;
    color: #ffffff;
  }
}

.triangle-down {
  cursor: pointer;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid rgba(201, 201, 201, 1);
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.rotate {
  transform: translateY(-50%) rotate(180deg);
}

.it-select-options-panel {
  position: absolute;
  width: clamp(13.75rem, 11.46vw, 27.5rem);
  top: calc(100% + 15px);
  right: 4%;
  box-shadow: 0px 0px 15px rgba(32, 110, 242, 0.15);
  max-height: 264px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 99;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}

.it-select-option {
  padding: 0 clamp(1.375rem, 1.15vw, 2.75rem);
  cursor: pointer;
  height: clamp(2.75rem, 2.29vw, 5.5rem);
  line-height: clamp(2.75rem, 2.29vw, 5.5rem);
  font-size: clamp(1.125rem, 0.94vw, 2.25rem);
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: rgba(6, 30, 41, 0.9);
}

.it-select-option.check {
  color: #206ef2;
  background: rgba(41, 66, 77, 1);
}

.it-select-option:hover {
  background: rgba(41, 66, 77, 1);
  color: rgba(255, 255, 255, 1);
}

.show {
  display: block;
}

.hidden {
  display: none;
}

.it-select {
  border: 1px solid rgba(0, 22, 93, 0.2);
  box-shadow: none !important;
  border-radius: 10px;
}

.selected {
  background-color: #cccccc;
  cursor: not-allowed;

  &:hover {
    color: #333333;
    background-color: #cccccc;
  }
}

.direction {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
